<template>
    <div :style="[{
            width:'calc( '+initWidth+'%)',
            border: initWidth === 0 ? 'none' : '',
            margin: initWidth === 100? 0 : '16px',
            height: initWidth === 100? '100%' : 'calc(100% - 42px)',
            padding: initWidth === 0 ? '0' : ''}]"
         @mouseenter="isOffBtn = true"
         @mouseleave="isOffBtn = false"
         class="mapLeft">
        <myTitleName :titleName="title" style="padding: 16px;background: rgba(243, 246, 253, 1); " v-if="initWidth !== 0">
            <template slot="titleRight">
                <div style="display: flex;align-items: center;">
                    <slot name="titleRight"></slot>
                    <div style="margin-left: 8px;cursor: pointer;" v-if="isShowFullScreen">
                        <img @click="initWidth=100" alt="" src="@/assets/images/icon/icon-fd.png" style="width: 24px;height: 24px;" v-if="initWidth!==100">
                        <img @click="initWidth = width" alt="" src="@/assets/images/icon/icon-sx.png" style="width: 24px;height: 24px;" v-else>
                    </div>
                </div>
            </template>
        </myTitleName>
        <div class="content" v-if="initWidth !== 0">
            <slot name="content"></slot>
        </div>
        <div v-if="initWidth !== 100">
            <div @click="initWidth=0" class="offBtn" v-if="initWidth!==0" v-show="isOffBtn">
                <span>关闭</span>
                <img alt="" src="@/assets/images/icon/icon-left.png">
            </div>
            <div @click="initWidth = width" class="offBtn" v-else>
                <span>展开</span>
                <img alt="" src="@/assets/images/icon/icon-right.png">
            </div>
        </div>
    </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '默认标题'
    },
    // 是否全屏
    isShowFullScreen: {
      type: Boolean,
      default: false
    },
    width: {
      type: [String, Number],
      default: '30'
    }
  },
  data() {
    return {
      isFullScreen: false,//是否全屏
      initWidth: 30,
      isOffBtn: false,
    }
  },
  created() {
    this.initWidth = this.width
  },
  mounted() {

  },
  methods: {},
}
</script>

<style lang="scss" scoped>
    .mapLeft {
        font-family: OPPOSans;
        position: absolute;
        top: 0;
        left: 0;

        z-index: 1999;
        /*padding: 16px; */
        /*height: calc(100% - 42px);*/
        /*margin: 16px;*/
        /*height: 100%;*/
        border-radius: 5px;
        border: 1px solid #d1e4ff;
        /*box-sizing: border-box;*/
        /*background: #ffffffcc;*/
        /*backdrop-filter: blur(13px);*/
        transition: all .3s linear;
        background: rgba(255, 255, 255, 1);

        .content {
            height: calc(100% - 78px);
            overflow: auto;
        }

        .offBtn {
            cursor: pointer;
            position: absolute;
            top: 50%;
            right: 0%;
            transform: translate(100%, -50%);
            z-index: 1999;
            width: 31px;
            height: 86px;
            border-radius: 0px 5px 5px 0px;
            background: #fcfcfc;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            text-align: center;
            color: #6b7885;
            font-weight: 500;

            img {
                margin-top: 3px;
                width: 15px;
                height: 15px;
            }
        }
    }
</style>
